<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>首页</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	::-webkit-input-placeholder {color:#fff;} /* WebKit, Blink, Edge */
	:-moz-placeholder {color:#fff;} /* Mozilla Firefox 4 to 18 */
	::-moz-placeholder {color:#fff;} /* Mozilla Firefox 19+ */
	:-ms-input-placeholder {color:#fff;} /* Internet Explorer 10-11 */
	/*-- 顶部 --*/
	.top_box{position:relative;}
		/* 搜索 */
	.top_box>.ss_box{position:absolute;top:0;left:0;height:50px;width:100%;z-index:9999;}
	.top_box>.ss_box>form{float:left;width:calc(100% - 60px);height:30px;padding:10px 0 10px 10px;position:relative;}
	.top_box>.ss_box>form>div{
		display:block;width:68px;height:28px;line-height:28px;border:1px solid rgba(255,255,255,.2);border-top-left-radius:15px;border-bottom-left-radius:15px;
		background-color:rgba(255,255,255,0);color:#fff;text-align-last:center;float:left;outline:none;transition:.2s;font-size:14px;position:relative;
	}
	.top_box>.ss_box>form>div>div{
		width:5px;height:5px;border-right:1px solid #fff;border-bottom:1px solid #fff;position:absolute;right:7px;top:calc(50% - 5px);
		transform:rotate(45deg);
	}
	.top_box>.ss_box>form>input{
		float:left;border:none;width:calc(100% - 70px);height:30px;line-height:30px;background-color:rgba(255,255,255,.2);color:#fff;
		text-indent:10px;border-top-right-radius:15px;border-bottom-right-radius:15px;outline:none;transition:.2s;
	}
	.top_box>.ss_box>form>div:hover{border-color:rgba(255,255,255,.4);}
	.top_box>.ss_box>form>input:hover{background-color:rgba(255,255,255,.4);}
	
	.top_box>.ss_box>form>button{position:absolute;width:45px;height:30px;right:0;top:10px;border:none;background-color:rgba(255,255,255,0);}
	.top_box>.ss_box>form>button>img{width:100%;}
		/* 搜索 */
		/* 扫码 */
	.top_box>.ss_box>div{float:left;width:24px;height:24px;margin:13px;}
	.top_box>.ss_box>div>img{width:100%;}
		/* 扫码 */
		/* banner */
	.top_box>.banner{position:relative;width:100%;overflow:hidden;}
	.top_box>.banner img{width:100%;}
	
	.top_box>.banner>ul{position:relative;}
	.top_box>.banner>ul>li{float:left;}
	.top_box>.banner>ol{position:absolute;height:4px;bottom:8px;transform:translateX(-50%);left:50%;}
	.top_box>.banner>ol>li{float:left;width:10px;margin:0 5px;height:4px;border-radius:2px;background-color:rgba(255,255,255,.4);}
	.ban_dian_se{background-color:rgba(255,255,255,1)!important;}
		/* banner */
	/*-- 顶部 --*/
	@media(max-device-width:414px){
		.top_box>.banner img{height:220px;}
	}
	@media(max-device-width:375px){
		.top_box>.banner img{height:200px;}
	}
	@media(max-device-width:360px){
		.top_box>.banner img{height:192px;}
	}
	/*-- 一堆按钮 --*/
	.yidui_anniu>ul{padding:10px 0;border-bottom:1px solid #eee;}
	.yidui_anniu>ul>li{float:left;width:calc(100% / 3);padding:10px 0;}
	.yidui_anniu>ul>li>a{display:block;width:60px;margin:0 auto;color:#747474;font-size:14px;text-align:center;}
	.yidui_anniu>ul>li>a>div{width:60px;height:60px;}
	.yidui_anniu>ul>li>a>div img{width:100%;}
	
	.yidui_anniu>marquee{height:50px;border-bottom:10px solid #f2f3f9;}
	.toutiao_sty{height:50px;}
	.toutiao_sty>li{float:left;width:150px;height:50px;line-height:50px;color:#7f7f7f;}
	/*-- 一堆按钮 --*/
	/*-- 轮播宣传广告 --*/
	.lunbo_ad{border-bottom:10px solid #f2f3f9;height:70px;position:relative;overflow:hidden;}
	.lunbo_ad>ul{position:absolute;left:0;top:0;}
	.lunbo_ad>ul>li{float:left;height:70px;}
	.lunbo_ad>ul>li>img{width:100%;}
	
	.lunbo_ad>ol{position:absolute;height:4px;bottom:8px;left:50%;transform:translateX(-50%);}
	.lunbo_ad>ol>li{float:left;width:10px;margin:0 5px;height:4px;border-radius:2px;background-color:#dce6ec;}
	.ad_dian_se{background-color:#849bff!important;}
	/*-- 轮播宣传广告 --*/
	/*-- 周边商家 --*/
	.zhoubian_sj{border-bottom:60px solid #f2f3f9;}
	
	.zhoubian_sj>p{color:#a3b1bf;margin:15px 0 15px 10px;height:22px;border-left:5px solid #2f9bfe;text-indent:10px;line-height:22px;}
	.zhoubian_sj>ul>li{border-bottom:6px solid #f2f3f9;padding:14px;}
	.zhoubian_sj>ul>li>div:nth-of-type(1){float:left;width:60px;}
	.zhoubian_sj>ul>li>div:nth-of-type(1)>img{width:100%;border-radius:5px;}
	.zhoubian_sj>ul>li>div:nth-of-type(2){float:left;width:calc(100% - 76px);margin-left:16px;}

	.sj_style>div{position:relative;line-height:30px;border-bottom:1px solid #f3f3f3;}
	.sj_style>div>p:nth-of-type(1){font-size:16px;color:#000;}
	.sj_style>div>p:nth-of-type(2){font-size:12px;color:#a2a2a2;}
	.sj_style>div>div{position:absolute;color:#4f89ff;font-size:18px;font-weight:bold;right:0;top:0;}
	.sj_style>p{font-size:12px;color:#fbc681;line-height:34px;}
	/*-- 周边商家 --*/
</style>
</head>

<body>
    <!-- 顶部 -->
    <div class="top_box">
        <div class="ss_box">
            <form action="">
				<div>
					阳泉
					<div></div>
				</div>
                <button><img src="__HOME__/img/fangdajin_bai.png" alt=""></button>
                <input type="text" placeholder="搜索服务">
            </form>
            <div onclick="location.href='/index/index/scan.html'">
                <img src="__HOME__/img/saoma.png" alt="">
            </div>
        </div>
        <div class="banner">
            <ul>
                {foreach $banner as $v}
                <li><img src="{$v}" alt=""></li>
                {/foreach}
                <h6 class="clearfix"></h6>
            </ul>
            <ol>
          
                <h6 class="clearfix"></h6>
            </ol>
        </div>
    </div>
    <!-- 顶部 -->
    <!-- 一堆按钮 -->
    <div class="yidui_anniu">
        <ul>
            {foreach $cate as $k => $v}
            <li>
                <a href="{:url('shop',['id'=>$v['id']])}">
                    <div style="background-position:;">
                        <img src="{$v['img']}" alt="">
                    </div>
                    <p>{$v['name']}</p>
                </a>
            </li>
            {/foreach}
            <h6 class="clearfix"></h6>
        </ul>
        <marquee marquee="left">
            <ul class="toutiao_sty">
                <li><img src="__HOME__/img/toutiao.png" alt=""></li>
                <li>{$notice}</li>
                <h6 class="clearfix"></h6>
            </ul>
        </marquee>
    </div>
    <!-- 一堆按钮 -->
    <!-- 轮播宣传广告 -->
    <div class="lunbo_ad">
		<ul>
			{for start='0' end='count($guanggao)'}
			<li>
				<img src="{$guanggao[$i]}" alt="">
			</li>
			{/for}
			
			
            <h6 class="clearfix"></h6>
        </ul>
        <ol>

            <h6 class="clearfix"></h6>
        </ol>
    </div>
    <!-- 轮播宣传广告 -->
    <!-- 周边商家 -->
    <div class="zhoubian_sj">
        <p>周边商家</p>
        <ul>
            {foreach $shop as $k => $v}
            <li onclick="location.href='/index/index/shopinfo?id={$v['supplier_id']}.html'">
                <div><img src="__HOME__/img/shangjia_kth.jpg" alt=""></div>
                <div class="sj_style">
                    <div>
                        <p>{$v['name']}</p>
                        <p>{$v['address']}}</p>
                        {notempty name="v['discount']"}
                        	<div>享<span>{$v['discount']}</span>折</div>
                        {/notempty}
                    </div>
                    <p>营业时间{$v['business_time_u']}</p>
                </div>
                <h6 class="clearfix"></h6>
            </li>
            {/foreach}
        </ul>
    </div>
    <!-- 周边商家 -->
    <!-- 底部按钮区 -->
    <div class="footer">
    	<div>
            <div><div style="background-position-X:-24px;background-position-Y:-24px"></div></div>
            <p>首页</p>
        </div>
        <div onClick="location.href='{:url('shop')}'">
            <div><div></div></div>
            <p>商家</p>
        </div>
		<div id="saoyisao" onclick="location.href='/index/index/scan.html'">
			<div><div></div></div>
			<p>扫一扫</p>
		</div>
        <div onClick="location.href='{:url('seller')}'">
            <div><div style="background-position-X:-48px"></div></div>
			<p>商家入驻</p>
		</div>
		<div onClick="location.href='{:url('personal')}'">
			<div><div style="background-position-X:-72px"></div></div>
            <p>我的</p>
        </div>
        <h6 class="clearfix"></h6>
    </div>
    <!-- 底部按钮区 -->
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>
	$(document).ready(function(e){
		/*banner 自由数*/
		var ban_len = $(".banner>ul>li").length;
		$(".top_box>.banner>ul").width(ban_len * 100 + "%");
		$(".top_box>.banner>ul>li").width(100 / ban_len + "%");
		var qbz = 20 * ban_len;
		$(".top_box>.banner>ol").width(qbz);
		var ban_str = "";
		for(var a = 0;a < ban_len;a++){
			if(a === 0){
				ban_str+="<li class='ban_dian_se'></li>";
			}else{
				ban_str+="<li></li>";
			}
		}
		$(".top_box>.banner>ol").prepend(ban_str);
		/*banner 自由数*/
		/*广告宣传滚动 自由数 */
		var lb_length = $(".lunbo_ad>ul>li").length;
		$(".lunbo_ad>ul").width(lb_length * 100 + "%");
		$(".lunbo_ad>ul>li").width(100 / lb_length + "%");
		var qbz = 20 * lb_length;
		$(".lunbo_ad>ol").width(qbz);
		var lb_str = "";
		for(var a = 0;a < lb_length;a++){
			if(a === 0){
				lb_str+="<li class='ad_dian_se'></li>";
			}else{
				lb_str+="<li></li>";
			}
		}
		$(".lunbo_ad>ol").prepend(lb_str);
		/*广告宣传滚动 自由数 */
		
		clearInterval(ban_t);
		clearInterval(ad_t);
		var ban_t = setInterval(function(){banner()},3000);
		var ad_t  = setInterval(function(){ad()},3000);
		var i = 1;
		var q = 1;
		//banner滚动
		function banner(){
			if(i >= ban_len){i = 0;}
			var b = -100 * i + "%"
			$(".banner>ul").animate({left:b});
			$(".ban_dian_se").removeClass("ban_dian_se");
			$(".banner>ol>li").eq(i).addClass("ban_dian_se");
			i++;
		}
		//广告宣传滚动
		function ad(){
			if(q >= lb_length){q = 0;}
			var b = -100 * q + "%"
			$(".lunbo_ad>ul").animate({left:b});
			$(".ad_dian_se").removeClass("ad_dian_se");
			$(".lunbo_ad>ol>li").eq(q).addClass("ad_dian_se");
			q++;
		}
	})

</script>
</html>
